<template>
  <span v-if="invisible"></span>

  <div v-else-if="widget_todo">
    todo: {{ [field.type, fname, widget] }}
    {{ value_display }}
    {{ selectionOptions }}
  </div>

  <div v-else-if="type === 'cell'">
    <van-form ref="refForm">
      <template v-if="readonly || !editable">
        <van-field readonly :value="value_readonly">
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
        </van-field>
      </template>

      <template v-else>
        <van-field
          readonly
          clickable
          :value="(value_with_label || [null, ''])[1]"
          :name="fname"
          placeholder="请选择"
          @click="onClickCellEdit"
        >
          <template #label>
            <OLabel :data-info="dataInfo" :view-info="viewInfo" />
          </template>
        </van-field>

        <van-popup v-model="showPicker" position="bottom">
          <SearchPicker
            :default-index="-1"
            :columns="selectionOptions"
            @search="handleSearch"
            @confirm="handleConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
      </template>
    </van-form>
  </div>

  <a v-else-if="readonly || !editable" :class="className">
    {{ [field.type, fname, widget] }}
    <span> {{ value_readonly }} </span>
  </a>

  <div v-else>edit m2o:</div>
</template>

<script>
import api from '@/odooapi'
import OFMixin from './OFMixin'
import OLabel from '../OLabel.vue'

import SearchPicker from '@/components/Vant/SearchPicker.vue'

const widget_to_load_options = [
  // 'selection', 'radio'
]

export default {
  name: 'FMany2one',
  components: { OLabel, SearchPicker },
  mixins: [OFMixin],
  props: {},
  data() {
    return {
      showPicker: false,

      selectionOptions: []
    }
  },
  computed: {
    value_readonly() {
      const val = this.record[this.fname]
      return val ? val[1] : ''
    },

    value_edit() {
      if (this.fname in this.values) {
        const val = this.record[this.fname]
        return val ? val[0] : undefined
      } else {
        const val = this.record[this.fname]
        return val ? val[0] : undefined
      }
    },

    value_with_label() {
      if (this.fname in this.values) {
        const val = this.values[this.fname]
        return val || undefined
      } else {
        const val = this.record[this.fname]
        return val || undefined
      }
    },

    widget_todo() {
      // many2one_avatar_user
      // many2one_avatar_employee
      // res_partner_many2one
      // many2one_barcode
      // product_configurator
      const done = [
        // 'res_partner_many2one',
        // // 'many2one_avatar_user',
        // 'many2one_barcode',
        // 'product_configurator'
      ]
      return done.includes(this.widget) ? '' : this.widget
    }
  },

  watch: {
    // eslint-disable-next-line no-unused-vars
    'dataInfo.ready'(newValue, oldValue) {
      if (widget_to_load_options.includes(this.widget)) {
        if (newValue && !this.selectionOptions) {
          // console.log('m2o, watch ready', this.fname, newValue)
          this.load_select_options()
        }
      }
    }
  },

  created() {},

  mounted() {
    if (widget_to_load_options.includes(this.widget)) {
      if (this.dataInfo.ready && !this.selectionOptions) {
        // console.log('m2o,selection, mounted', [this.fname, this.field])
        this.load_select_options()
      }
    }
  },

  methods: {
    async onClickCellEdit() {
      console.log('onClickCellEdit')

      this.showPicker = true

      this.load_select_options()
    },
    async load_select_options() {
      // console.log(this.field)
      const ops = await this.optionsMethod({ name: '', limit: 0 })
      this.selectionOptions = ops

      // console.log(ops)
    },
    optionsMethod(payload = {}) {
      console.log('get_options', payload, this.dataInfo)
      const { parentData } = this.dataInfo
      const parent_kw = parentData ? { parentData } : {}
      return api.Node.get_selection(this.viewInfo, {
        record: this.record,
        values: this.values,
        field: this.fname,
        ...parent_kw,
        ...payload
      })
    },

    async handleSearch(text) {
      console.log('handleSearch', text)
      const ops = await this.optionsMethod({ name: text || '', limit: 0 })
      this.selectionOptions = ops
    },

    async handleConfirm(value) {
      console.log('handleConfirm', value)
      const res = await this.onchange(value)
      console.log('handleConfirm', res)
      this.showPicker = false
    }
  }
}
</script>

<style type="text/css"></style>
